import React,{useState,useEffect} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    StatusBar,
    TextInput,
    Text,
    Image,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
import { Ionicons,FontAwesome } from '@expo/vector-icons';
import '../../features/Phone';

const Comment = ({route,navigation}) => {
    const [content,setContent] = useState('');
    const postTopic = () => {
        fetch('http://175.27.190.73:9000/publishTalk', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({content:content, userId:route.params.userId, track:route.params.track})
        })
            .then(res => res.json())
            .then(res => {
                if(res == "发表成功"){
                    ToastAndroid.show(res,ToastAndroid.SHORT)
                    navigation.goBack()
                }else{
                   ToastAndroid.show('发表失败',ToastAndroid.SHORT)
                }
            })
    };

    return (
        <View style={{width:w, height:h, backgroundColor:'#f0f0f0'}}>
            {/* 导航栏 */}
            <View style={{
                width: w,
                height: h/11,
                padding: 10,
                paddingTop: 30,
                backgroundColor: 'white',
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{navigation.goBack()}}
                >
                    <Ionicons name="chevron-back" size={30} color="black" />
                </TouchableOpacity>
                <View>
                    <Text style={{fontSize:20, color:'black'}}>{route.params.named}</Text>
                </View>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{postTopic()}}
                >
                    <FontAwesome name="send-o" size={20} color="black" />
                </TouchableOpacity>
            </View>

            {/* 文本 */}
            <View style={{padding:10, borderWidth:1, borderColor:'lightgray'}}>
                <Text style={{fontSize:18, color:'black'}}>我的点评：</Text>
                <TextInput 
                    value={content}
                    onChangeText={e => setContent(e)}
                    placeholder={'把你的心得分享给大家吧！'}
                    placeholderTextColor='gray'
                    multiline={true}
                    style={{
                        height:h*0.3, paddingTop:10,
                        textAlignVertical: 'top',
                        color: 'gray',
                    }}
                />
            </View>
        </View>
    )
}

export default Comment
